<template>
  <div class="tab-bar">
    <TabBarItem path="/main">
      <div slot="item-text" class="divText">首页</div>
    </TabBarItem>
    <TabBarItem path="/topic">
      <div slot="item-text" class="divText">话题</div>
    </TabBarItem>
    <TabBarItem path="/circleHome">
      <div slot="item-text" class="divText">圈子</div>
    </TabBarItem>
  </div>
</template>

<script>
  import TabBar from "./TabBar";
  import TabBarItem from "./TabBarItem";
  export default {
    name: "MainTabBar",
    components: {
      TabBar,
      TabBarItem
    }

  }
</script>

<style Lang="less" scoped>
  .divText {
    padding-bottom: 10px;
    position: absolute;
    top: 50%;
    transform: translate(0%, -40%);
  }
  .tab-bar{
    display: flex;
  }
</style>